<template>
  <el-row :gutter="40" class="panel-group">
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('签到人数')">
        <div class="card-panel-icon-wrapper icon-people">
          <el-popover
            placement="right"
            width="220"
            trigger="click">
            <el-tabs type="border-card">
              <el-tab-pane label="已签到">
                <el-table :data="signed">
                  <el-table-column width="100" property="name" label="姓名"></el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="未签到">
                <el-table :data="unSign">
                  <el-table-column width="100" property="name" label="姓名"></el-table-column>
                </el-table>
              </el-tab-pane>
            </el-tabs>
            <!--<el-button slot="reference"></el-button>-->
            <svg-icon slot="reference" icon-class="peoples" class-name="card-panel-icon"/>
          </el-popover>
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            今日签到人数
          </div>
          <span style="font-size: 20px;font-weight: bold">{{ sum }} / {{ total }} (All)</span>
        </div>
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('messages')">
        <div class="card-panel-icon-wrapper icon-message">
          <svg-icon icon-class="message" class-name="card-panel-icon" @click="send" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            发送消息
          </div>
          <!--<count-to :start-val="0" :end-val="81212" :duration="3000" class="card-panel-num" />-->
        </div>
      </div>
      <el-dialog :visible.sync="messageDialogVisible" title="发送消息">
        <el-form :model="message" label-width="80px" label-position="left">
          <el-form-item label="发送对象">
            <el-select v-model="userIds" filterable multiple placeholder="输入名字">
              <el-option
                v-for="user in userList"
                :key="user.id"
                :label="user.name"
                :value="user.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="内容">
            <el-input v-model="message.content" placeholder="内容"/>
          </el-form-item>
        </el-form>
        <div style="text-align:right;">
          <el-button type="danger" @click="messageDialogVisible=false">取消</el-button>
          <el-button type="primary" @click="sendMessage">确定</el-button>
        </div>
      </el-dialog>
    </el-col>
    <el-dialog title="日历" :visible.sync="dialogTableVisible">
      <el-card class="box-card">
        <el-calendar v-model="today">
        </el-calendar>
      </el-card>
    </el-dialog>
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel" @click="dialogTableVisible = true" style="padding: 30px">
        <span class="el-icon-date" style="margin-left: 30%;font-size: 40px;font-weight: bold;color: #4A9FF9">日历</span>
      </div>
    </el-col>

    <!--<el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('purchases')">
        <span>待补充</span>
        &lt;!&ndash;<div class="card-panel-icon-wrapper icon-money">
          <svg-icon icon-class="money" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            Purchases
          </div>
          <count-to :start-val="0" :end-val="9280" :duration="3200" class="card-panel-num" />
        </div>&ndash;&gt;
      </div>
    </el-col>
    <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
      <div class="card-panel" @click="handleSetLineChartData('shoppings')">
        &lt;!&ndash;<div class="card-panel-icon-wrapper icon-shopping">
          <svg-icon icon-class="shopping" class-name="card-panel-icon" />
        </div>
        <div class="card-panel-description">
          <div class="card-panel-text">
            Shoppings
          </div>
          <count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
        </div>&ndash;&gt;
        <span>待补充</span>
      </div>
    </el-col>-->
  </el-row>
</template>

<script>
import { getSignDayRecord } from '@/api/statistics'
import { getUserList } from '@/api/user'
import { addNotifications } from '@/api/notification'

const defaultMessage = {}

export default {
  components: {
    // CountTo
  },
  created() {
    this.getSignDayRecord()
    this.getUserList()
  },
  data() {
    return {
      signed: [],
      unSign: [],
      total: 0,
      sum: 0,
      message: Object.assign({}, defaultMessage),
      userIds: [],
      userList: [],
      messageDialogVisible: false,
      dialogTableVisible: false,
      today: new Date()
    }
  },
  methods: {
    handleSetLineChartData(type) {
     //  console.log("点击")
      this.$emit('handleSetLineChartData', type)
    },
    async getSignDayRecord() {
      await getSignDayRecord().then((res) => {
        this.signed = res.data.signed
        this.unSign = res.data.unSign
        this.sum = this.signed.length
        this.total = this.unSign.length + this.sum
      })
    },
    send() {
      this.message = Object.assign({}, defaultMessage)
      this.userIds = []
      this.messageDialogVisible = true
    },
    async sendMessage() {
      this.message.userIds = this.userIds
      await addNotifications(this.message)
      this.messageDialogVisible = false
      this.$notify({
        title: 'Success',
        dangerouslyUseHTMLString: true,
        message: '操作成功',
        type: 'success'
      })
    },
    async getUserList() {
      const res = await getUserList()
      this.userList = res.data
    },
  }
}
</script>

<style lang="scss" scoped>
.panel-group {
  margin-top: 18px;

  .card-panel-col {
    margin-bottom: 32px;
  }

  .card-panel {
    height: 108px;
    cursor: pointer;
    font-size: 12px;
    position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
    border-color: rgba(0, 0, 0, .05);

    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }

      .icon-people {
        background: #40c9c6;
      }

      .icon-message {
        background: #36a3f7;
      }

      .icon-money {
        background: #f4516c;
      }

      .icon-shopping {
        background: #34bfa3
      }
    }

    .icon-people {
      color: #40c9c6;
    }

    .icon-message {
      color: #36a3f7;
    }

    .icon-money {
      color: #f4516c;
    }

    .icon-shopping {
      color: #34bfa3
    }

    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .card-panel-icon {
      float: left;
      font-size: 48px;
    }

    .card-panel-description {
      float: right;
      font-weight: bold;
      margin: 26px;
      margin-left: 0px;

      .card-panel-text {
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }

      .card-panel-num {
        font-size: 20px;
      }
    }
  }
}

@media (max-width: 550px) {
  .card-panel-description {
    display: none;
  }

  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;

    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}
</style>
